<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="../addons/orange_api/style/css/bootstrap.min.css">
    <script src="../addons/orange_api/style/js/jquery-2.1.4.min.js"></script>

    <script src="../addons/orange_api/style/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../addons/orange_api/style/json/jsonFormater.css">
    <script src="../addons/orange_api/style/json/jsonFormater.js"></script>

    <style>
        body{
            font-family: -apple-system-font, Helvetica Neue, sans-serif;
            background-color: #eee;
        }
        .baobiao{
            box-shadow: 0 4px 8px 0 rgba(7,17,27,.1);
            text-align: center;
        }
        .jf-CodeContainer{
            background: #e8e8e8;

        }


    </style>

</head>

<body>


<div class="container-fluid"  style="background: white">


    <div class="page-header">
        <h1>接口测试报表 <small>{$api_type}  <span class="label label-success">BM 网络科技</span></small></h1>
    </div>

    <div class="alert alert-success alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <strong>总测试记录数：</strong> {php echo count($recordList);}
    </div>

    <div class="baobiao table-responsive" data-example-id="bordered-table">
        <table class="table table-bordered table-hover">
            <thead>
            <tr>
                <th>#</th>
                <th>接口</th>
                <th>请求类型</th>
                <th>请求</th>
                <th>响应</th>
                <th>测试时间</th>
            </tr>
            </thead>
            <tbody>

            {loop $recordList $record}
                <tr>
                    <th scope="row">{$record['id']}</th>
                    <td><span class="label label-success">{$record['api']}</span></td>
                    <td><span class="label label-danger">{$record['request_type']}</span></td>
                    <td class="apirequest-{$record['id']}">{$record['request']}</td>
                    <td class="apiresponse-{$record['id']}">{$record['response']}</td>
                    <td>{php echo date('Y-m-d H:i', $record['create_time']);}</td>
                </tr>
                <script>
                    $(document).ready(function(){
                        var apirequest = $(".apirequest"+{$record['id']});

                        var options = {
                            dom : '.apirequest-'+{$record['id']}, //对应容器的css选择器
                            singleTab: "  ",  //单个tab
                            tabSize: 2,       //缩进数量
                            quoteKeys: true,  //key是否用双引号包含
                            imgCollapsed: "../addons/orange_api/style/json/images/Collapsed.gif", //收起的图片路径
                            imgExpanded: "../addons/orange_api/style/json/images/Expanded.gif",  //展开的图片路径
                            isCollapsible: true //是否支持展开收起
                        };
                        var jf = new JsonFormater(options); //创建对象


                        if({$record['response']} != ''){
                            jf.doFormat({$record['request']}); //格式化json
                        }
                    });

                    $(document).ready(function(){
                        var apiresponse = $(".apiresponse"+{$record['id']});

                        var options = {
                            dom : '.apiresponse-'+{$record['id']}, //对应容器的css选择器
                            singleTab: "  ",  //单个tab
                            tabSize: 2,       //缩进数量
                            quoteKeys: true,  //key是否用双引号包含
                            imgCollapsed: "../addons/orange_api/style/json/images/Collapsed.gif", //收起的图片路径
                            imgExpanded: "../addons/orange_api/style/json/images/Expanded.gif",  //展开的图片路径
                            isCollapsible: true //是否支持展开收起
                        };
                        var jf = new JsonFormater(options); //创建对象

                        if({$record['response']} != ''){
                            jf.doFormat({$record['response']}); //格式化json
                        }


                    });
                </script>
            {/loop}
            </tbody>
        </table>

    </div>

</div>


<div class=".container-fluid">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div id="footer">
                <div class="footerNav" style="height: 150px;background: #2a2730">
                    <div class="container" style="color: white">
                        <div class="col-md-3">

                            <h1>接口测试报表</h1>
                                <small><span class="label label-success">BM 网络科技</span></small>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

</body>
</html>